<template>
  <div class="charts-wrapper">
    <div class="screen-infor">
      <el-tag>传感器当前数据</el-tag>
      <timeScreen></timeScreen>
    </div>
    <current></current>
    <div class="title-data">
      <el-tag>传感器数据曲线</el-tag>
    </div>
    <div class="timer-select">
      <div class="timer-select-left">
        <el-date-picker
            v-model="value1"
            type="datetime"
            placeholder="请选择开始日期时间"
            @blur="handleStart">
        </el-date-picker>
      </div>
      <div class="timer-select-right">
        <el-date-picker
            v-model="value2"
            type="datetime"
            placeholder="请选择结束日期时间"
            @blur="handleEnd">
        </el-date-picker>
      </div>
    </div>
    <div class="chats-screen">
      <div class="tem-data-charts">
        <dataCharts :my-id="this.idData[0]" :title-name="this.titleName[0]" :data-title="this.dataTitle[0]"></dataCharts>
      </div>
      <div class="tem-data-charts-one">
        <dataCharts :my-id="this.idData[1]" :title-name="this.titleName[1]" :data-title="this.dataTitle[1]"></dataCharts>
      </div>
      <div class="tem-data-charts-two">
        <dataCharts :my-id="this.idData[2]" :title-name="this.titleName[2]" :data-title="this.dataTitle[2]"></dataCharts>
      </div>
      <div class="tem-data-charts-three">
        <phCharts :my-id="this.idData[3]" :title-name="this.titleName[3]" :data-title="this.dataTitle[3]"></phCharts>
      </div>
    </div>
  </div>
</template>

<!--数据中心传感器数据和阶段曲线页面-->
<script>
import timeScreen from '../../../components/time-screen'
import current from './current-data'
import dataCharts from './tem-charts'
import phCharts from './PH'

export default {
  name: "index",
  data(){
    return{
      value1:'',
      value2:'',
      idData:['myCharts','myChartsOne','myChartsTwo','myChartsThree'],
      titleName:['上下层温度曲线','上下层溶解氧曲线','上下层盐度曲线','PH值曲线',],
      dataTitle:[['上层温度','下层温度'],['上层溶解氧','下层溶解氧'],['上层盐度值','下层盐度值'],['PH值']]
    }
  },
  methods:{
    handleStart(){
      console.log(this.value1)
    },
    handleEnd(){
      console.log(this.value2)
    },
  },
  components:{
    current,
    timeScreen,
    dataCharts,
    phCharts
  }
}
</script>

<style scoped lang="less">
  .charts-wrapper{
    overflow: hidden;
    background-color: #f6f6f6;
  }
  .timer-select{
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .timer-select-left{
    width: 50vw;
    background-color: #4865f8;
  }
  .timer-select-right{
    width: 50vw;
    background-color: #4865f8;
  }
  .screen-infor{
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .title-data{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .chats-screen{
    margin-bottom: 8vh;
  }
  .tem-data-charts{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: skyblue;
  }
  .tem-data-charts-one{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #d7af43;
    margin-top: 2vh;
  }
  .tem-data-charts-two{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #94be94;
    margin-top: 2vh;
  }
  .tem-data-charts-three{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0c4cb;
    margin-top: 2vh;
  }
</style>